<template>
	<view>
		<view style="height: 60rpx;width: 100%;"></view>
		<view class="form">
			<view class="input-item" >
				<view class="label">
					<text class="must">*</text>
					<text>申请类型</text>
				</view>
				<!-- <view class="input-content type-list">
					<block v-for="(item,index) in types">
						<view class="item" :class="index === typeIndex ? 'active' : ''" @click="changeType(index)">{{item.name}}</view>
					</block>
				</view> -->
				<input class="input-content-text" disabled="disabled" v-model="projectText" placeholder="请选择项目" placeholder-class="holder" @click="showProject" />
			</view>
			<view class="input-item">
				<view class="label">
					<text class="must">*</text>
					<text>所属职工</text>
				</view>
				<input class="input-content-text" placeholder="请选择职工" placeholder-class="holder" v-model="member.realname" disabled="disabled" @click="showMember" />
			</view>
			<view class="input-item">
				<view class="label">
					<text class="must">*</text>
					<text>成交额</text>
				</view>
				
				<input class="input-content-text" type='digit' placeholder="请填写成交额" placeholder-class="holder" v-model="info.price" />
			</view>
			
			<view class="" style="padding: 30rpx 0 10rpx 0;">
				<view class="label">
					<text class="must"></text>
					<text>备注</text>
				</view>
			</view>
			<view class="input-item" style="padding-bottom: 30rpx;">
				<textarea class="input-content text" placeholder="请输入备注内容" placeholder-class="holder" v-model="info.content" ></textarea>
			</view>
			<view class="input-item" style="justify-content: flex-start;">
				<view class="label">
					<!-- <text class="must">*</text> -->
					<text>辅助材料</text>
				</view>
				<view class="rf-uploader">
					<view class="uni-uploader">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<view v-for="(image, i) in images" :key="i">
									<view class="uni-uploader__file" style="position: relative;">
										<image class="uni-uploader__img" :src="image"></image>
										<view class="close-view" @tap="delImage(i,'images')">x</view>
									</view>
								</view>
								<view class="uni-uploader__input-box" v-if="images.length < 5">
									<view class="uni-uploader__input" @tap="chooseImg('images')"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		
		<view class="btn" @click="sub" v-if="state != 1 || edit == 1">保存</view>
		<view style="height: 100rpx;width: 100%;"></view>
		<jhxSelectProject ref="selectProject" @selectProject="selectProject"></jhxSelectProject>
		<jhxSelectUser ref="selectMember" @selectMember="selectMember"></jhxSelectUser>
	</view>
</template>

<script>
	import {
		projectList,create
	} from '@/api/merchant/order.js';
	import  payment  from '@/utils/payment.js';
	import helper from '@/utils/helper.js';
	import moment from '@/utils/moment';
	import jhxSelectProject from '@/components/jhx-select-project/jhx-select-project.vue';
	import jhxSelectUser from '@/merchant/components/jhx-select-user/jhx-select-user.vue';
	export default {
		components: {
			jhxSelectProject,
			jhxSelectUser
		},
		data() {
			return {
				types:[],
				images:[],
				page:1,
				typeIndex:'',
				info:{
					content:''
					
				},
				parentProject:{name:''},
				project:{name:''},
				projectText:'',
				member:{}
			}
		},
		onPullDownRefresh() {

		},
		onLoad(option) {
			//this._getData();
		},
		onShow() {

		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD')
			},
			//转整
			toInt(val) {
				return helper.toInt(val);
			}
		},
		methods: {
			showProject(){
				this.$refs.selectProject.open();
			},
			selectProject(e){
				console.log(e);
				this.parentProject = e.parent;
				this.project = e.child;
				this.info.project_parent_id = this.parentProject.id;
				this.info.project_id = this.project.id ? this.project.id : this.parentProject.id;
				this.projectText = this.parentProject.name + "-" + this.project.name;
			},
			showMember(){
				this.$refs.selectMember.open();
			},
			selectMember(e){
				console.log(e);
				this.member = e;
				this.info.member_id = this.member.id;
			},
			_getData: function() {
				var that = this;
				var args = {
					page: this.$data.page,
					num: 15
				}
				this.$http.get(`${projectList}`, {
						...args
					})
					.then(async data => {
						if (data.code == 200) {
							var data = data.data;
							that.types = data;
						}
					});
			},
			sub: function() {
				var that = this;
				this.info.images = JSON.stringify(this.images);
				uni.showLoading({
					title: '正在申请'
				})
				if (this.loading) {
					return;
				}
				this.loading = true;
				this.$http.post(`${create}`, {
						...this.info
					})
					.then(async data => {
						this.loading = false;
						uni.hideLoading();
						if (data.code == 200) {
							uni.showToast({
								title: '提交成功',
								//icon: 'none',
								duration: 2000
							})
							setTimeout(function(){
								uni.redirectTo({
									url:'/merchant/index'
								})
							},1000)
						} else {
							uni.showToast({
								title: data.message ? data.message : '申请失败，稍后重试',
								icon: 'none',
								duration: 2000
							})
						}
					});
			},
			changeType(index){
				
				this.typeIndex = index;
				this.info.project_id = this.types[index].id;
			},
			
			//上传图片
			async chooseImg(type = '') {
				var self = this;
				var count = 1;
				
				wx.chooseImage({
					count: count,
					mediaType:["image"],
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					async success(res) {
						// tempFilePath可以作为 img 标签的 src 属性显示图片
						console.log(111);
						console.log(res);
						await self.handleUploadFile(res.tempFilePaths, type)
					},
					fail(res){
						console.log(res);
					}
					
				})
			},
			// 依次上传图片
			async handleUploadFile(data, type) {
				var that = this;
				var url ='https://yeji.laikd.cn/';
				url = url + "api/v1/file/images";
				
				console.log(url);
				data.forEach(item => {
					var filePath = '';
					filePath = item
					
					console.log(filePath);
					uni.uploadFile({
						url: url, // 后端api接口
						filePath: filePath, // uni.chooseImage函数调用后获取的本地文件路劲
						name: 'file', //后端通过'file'获取上传的文件对象
						formData: {},
						header: {
							"Content-Type": "multipart/form-data",
							"x-api-key" : uni.getStorageSync('accessToken')
						},
						success: (res) => {
							if (res.statusCode == 200) {
								res.data = JSON.parse(res.data);
								var result = res.data;
								console.log(res);
								console.log(2222);
								console.log(result);
								if (type == 'images') {
									that.images.push(result.data.url);
								}
								
							}
						},
						fail:(e) => {
							console.log(e);
						}
					});
				});
				
			},
			delImage(index, type) {
				if (type == 'bank_pic') {
					this.bank_pic.splice(index, 1);
				}
				if (type == 'company_bank_pic') {
					this.company_bank_pic.splice(index, 1);
				}
			}
		}
	}
</script>

<style lang="scss">
	.holder{font-size: 28rpx;color: #999;}
	.form-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0 20rpx 0;

		.title-text {
			margin: 0 20rpx;
		}
	}

	.split {
		width: 200rpx;
		height: 2rpx;
		background-color: #efefef;
		display: block;
	}

	.head {
		text-align: center;

		.site-name {
			margin-top: 40rpx;
		}

		.title {
			font-weight: bold;
			font-size: 40rpx;
			margin: 40rpx 0 80rpx 0;
		}

	}

	.form {
		background-color: #fff;
		padding: 40rpx;
		margin-top: 30rpx;
		width: 92%;
		margin: 0 auto;
		border-radius: 20rpx;

		.input-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ececec;
			padding: 10rpx 0;

			.label {
				width: 190rpx;
				color: #666;
				font-size: 28rpx;
			}

			.input-content {
				width: calc(100% - 200rpx);
				
			}
			.input-content-text {
				width: calc(100% - 200rpx);
				line-height: 60rpx  !important;
				height: 90rpx;
			}
			.input-min {
				padding: 15rpx 0;
				width: calc(100% - 360rpx);
			}

			.must {
				color: red;
				margin-right: 5rpx;
			}
			.check{margin: 20rpx 0;background-color:#fff8d6; border:1px solid #f99a5b;text-align: center;padding: 25rpx 0;border-radius: 10rpx;}
			.type-list{
				display: flex;flex-wrap: wrap;
				.item{border: 1px solid #ececec;padding: 15rpx 20rpx;border-radius: 10rpx;margin-right: 30rpx;margin-bottom: 15rpx;}
				.active{background-color:#fff8d6;border: none;}
			}
			.text{border: 1px solid #ececec;width: 100%;padding: 20rpx;box-sizing: border-box;}
		}
	}

	.uni-uploader {
		padding: 0 3%;
	}

	.uni-uploader__file {
		width: 190upx;
		height: 190upx;
	}

	.uni-uploader__input-box {
		width: 188upx;
		height: 188upx;
	}

	/*选项框覆盖*/
	.uni-select {
		border: none !important;
		border-bottom: none !important;
		padding: 0 !important;
	}

	.uni-select__input-placeholder {
		font-size: 30rpx !important;
	}

	/**/
	.map {
		width: 100rpx;
		color: $uni-color-base;
	}

	.btn {
		width: 90%;
		background-color: $uni-color-base;
		margin: 0 auto;
		color: #fff;
		padding: 25rpx 0;
		border-radius: 60rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.close-view {
		position: absolute;
		right: 0;
		top: 0;
		background-color: #eee;
		color: #fff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 50%;
	}
</style>